import React, { useEffect, useState } from 'react';
import '../assets/css/EchartLayout.css'
import { NavLink, Outlet } from 'react-router-dom';
import { useLocation } from 'react-router-dom';

function EchartLayout(props: any) {
    console.log(document.body.scrollWidth);
    const location = useLocation();
    const [time, setTime] = useState(new Date());

    useEffect(() => {
        const timer = setInterval(() => {
            setTime(new Date());
        }, 1000);
        return () => clearInterval(timer);
    }, []);

    const weather = {
        icon: '☀️',
        temperature: 24,
        condition: '晴'
    };
    return (
        <div className='echart'>
            <div className={location.pathname === '/echarts/outpatient' ? 'echart-bg-full' : 'echart-bg'}>
                <div className={location.pathname === '/echarts/outpatient' ? 'echart-nav-full' : 'echart-nav'}>
                    <div className='echart-nav-title'>东软医院医疗卫生大数据分析平台</div>
                    <div className='echart-nav-list'>
                        <ul>
                            <li>综合分析</li>
                            <li><NavLink to='index'>科室分析</NavLink></li>
                            <li><NavLink to='outpatient'>门诊分析</NavLink></li>
                            <li>住院动态分析</li>
                            <li><NavLink to='finance'>财务分析</NavLink></li>
                        </ul>
                        {location.pathname === '/echarts/outpatient' ? (
                            < div style={{ display: 'flex', marginLeft: '100vw' }}>
                                <div className="weather-display">
                                    <div className="weather-icon">{weather.icon}</div>
                                    <div className="weather-info">
                                        <div className="temperature">{weather.temperature}°C</div>
                                        <div className="weather-condition">{weather.condition}</div>
                                    </div>
                                </div>
                                <div className="clock-display">
                                    <div className='clock-display-icon'></div>
                                    <div>{time.toLocaleTimeString()}</div>
                                </div>
                            </div>
                        ) : ''
                        }
                    </div>
                </div>
                <div className='echart-body'>
                    <Outlet></Outlet>
                </div>
            </div>
        </div >
    );
}

export default EchartLayout;
